<!-- 管理员:课程考核管理:成绩分析-课程考核成绩分布 -->
<template>
  <div>
    <div>
      <el-form label-suffix="：" label-position="left" style="display: flex; margin-bottom: -20px;">
        <el-form-item label-width="55px" label="学期">
          <el-select v-model="queryForm.semester" size="mini" placeholder="请选择学期" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="统计方式">
          <el-select v-model="queryForm.statistics" size="mini" placeholder="请选择统计方式" style="margin: 0 20px 0 -15px;" @change="handleChange">
            <el-option v-for="(item, index) in statisticsList" :key="index" :label="item.dictValue" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="70px" label="考核项">
          <el-select v-model="queryForm.assessment" size="mini" placeholder="请选择考核项" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in assessmentList" :key="index" :label="item.dictValue" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="培养层次">
          <el-select v-model="queryForm.level" size="mini" multiple collapse-tags clearable placeholder="请选择培养层次" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in levelList" :key="index" :label="item.dictValue" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="修习类型">
          <el-select v-model="queryForm.study" size="mini" clearable placeholder="请选择修习类型" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in studyList" :key="index" :label="item.dictValue" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="button-style" style="width: 75px; margin-top: 6px; background: #f1f8fe; border: 1px solid #51aef6;" @click="handleSearch">
            <img src="@/assets/assessment/icon-search.png" alt="" />
            <span style="font-size: 14px; color: #51aef6;">查询</span>
          </div>
        </el-form-item>
        <div class="button-style" style="margin-left: auto; width: 160px; margin-top: 6px; background: #EFEBFF; border: 1px solid #5241A4;" @click="handleReport">
          <img src="@/assets/assessment/统计计算.png" alt="" />
          <span style="font-size: 14px; color: #5241A4;">学期成绩统计数据</span>
        </div>
      </el-form>
    </div>
    <div style="margin: 15px 0;">
      <el-table
        border
        :data="tableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column type="selection" width="60" align="center" />
        <el-table-column v-if="!titleShow" :key="Math.random()" prop="guideitemname" label="操作" align="center">
          <template slot-scope="scope">
            <div class="button-style" style="width: 60px; background: #f1f8fe; border: 1px solid #51aef6;" @click="handleDetail(scope.row)">
              <span style="font-size: 14px; color: #51aef6;">详情</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="teacherroom" label="教研室" min-width="80px" show-overflow-tooltip align="center" />
        <el-table-column prop="coursenumber" label="课程编号" min-width="100px" show-overflow-tooltip align="center" />
        <el-table-column prop="coursename" label="课程名称" min-width="100px" show-overflow-tooltip align="center" />
        <el-table-column label="授课教员" min-width="100px" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.courseteacher.replace(scope.row.kcteacher, scope.row.kcteacher + '*') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="年级" min-width="80px" show-overflow-tooltip align="center" />
        <el-table-column v-if="titleShow" :key="Math.random()" prop="jxclass" label="教学班" min-width="80px" show-overflow-tooltip align="center" />
        <el-table-column v-if="titleShow" :key="Math.random()" prop="zybc" label="专业班次" min-width="100px" show-overflow-tooltip align="center" />
        <el-table-column prop="peoplenum" label="人数" min-width="80px" show-overflow-tooltip align="center" />
        <el-table-column label="优秀" align="center">
          <el-table-column prop="anum" label="人数" min-width="80px" show-overflow-tooltip align="center" />
          <el-table-column prop="anumzb" label="占比" min-width="80px" show-overflow-tooltip align="center" />
        </el-table-column>
        <el-table-column label="良好" align="center">
          <el-table-column prop="bnum" label="人数" min-width="80px" show-overflow-tooltip align="center" />
          <el-table-column prop="bnumzb" label="占比" min-width="80px" show-overflow-tooltip align="center" />
        </el-table-column>
        <el-table-column label="中等" align="center">
          <el-table-column prop="cnum" label="人数" min-width="80px" show-overflow-tooltip align="center" />
          <el-table-column prop="zdnumzb" label="占比" min-width="80px" show-overflow-tooltip align="center" />
        </el-table-column>
        <el-table-column label="及格（合格）" align="center">
          <el-table-column prop="dnum" label="人数" min-width="80px" show-overflow-tooltip align="center" />
          <el-table-column prop="dnumzb" label="占比" min-width="80px" show-overflow-tooltip align="center" />
        </el-table-column>
        <el-table-column label="不及格（不合格）" align="center">
          <el-table-column prop="enumm" label="人数" min-width="80px" show-overflow-tooltip align="center" />
          <el-table-column prop="enumzb" label="占比" min-width="80px" show-overflow-tooltip align="center" />
        </el-table-column>
        <el-table-column prop="maxscore" label="最高分" min-width="80px" show-overflow-tooltip align="center" />
        <el-table-column prop="minscore" label="最低分" min-width="80px" show-overflow-tooltip align="center" />
        <el-table-column prop="avgscore" label="平均分" min-width="80px" show-overflow-tooltip align="center" />
        <el-table-column prop="fz" label="分制" min-width="80px" show-overflow-tooltip align="center" />
        <el-table-column prop="khfs" label="考核方式" min-width="100px" show-overflow-tooltip align="center" />
      </el-table>
    </div>
    <div class="button-style">
      <img src="@/assets/assessment/icon-export.png" alt="" />
      <download-excel
        :data="tableData"
        :fields="jsonFields"
        type="xls"
        name="学员成绩排名.xls"
        style="font-size: 14px; color: #f3b815;">
        <span>导出Excel</span>
      </download-excel>
    </div>
    <div style="float: left; margin-top: 4px; margin-left: calc(40% - 55px); font-size: 14px; color: #004ca7;">
      <span>授课教员名字后加“*”为课程负责人</span>
    </div>
    <div style="float: right; padding-bottom: 15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 0;">
      </el-pagination>
    </div>
    <el-dialog title="学期成绩统计数据" :visible.sync="dialogShow1" width="1250px" style="height: 625px; overflow-y: hidden;">
      <el-table
        border
        :data="tableData1"
        class="xpaas-table-class detailTable"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column prop="score" label="成绩/成绩统计" align="center" />
        <el-table-column prop="maxscore" label="最高分" align="center" />
        <el-table-column prop="minscore" label="最低分" align="center" />
        <el-table-column prop="junzhi" label="均值" align="center" />
        <el-table-column prop="zhongzhi" label="中值" align="center" />
        <el-table-column prop="zhongshu" label="众数" align="center" />
        <el-table-column prop="diyisifenwei" label="第一四分位" align="center" />
        <el-table-column prop="disansifenwei" label="第三四分位" align="center" />
        <el-table-column prop="fangcha" label="方差" align="center" />
        <el-table-column prop="biaozhuncha" label="标准差" align="center" />
      </el-table>
    </el-dialog>
    <el-dialog title="信息工程大学洛阳校区学员成绩分布情况" :visible.sync="dialogShow2" width="1200px">
      <div class="mainTitle">{{ detail.semester }}学期</div>
      <div class="tabStyle">
        <div v-for="(item, index) in scoreList" :key="index" v-if="item.isSealed" :class="showType === item.dictKey ? 'selectedTab' : 'normalTab'" style="width: 100px;" @click="handleChangeType(detail.planId, item.dictKey, item.dictValue)">
          {{ item.dictValue }}
        </div>
      </div>
      <div class="subTitle">
        <span>【课程编号】课程名称：【{{ detail.courseNo }}】{{ detail.courseName }}&emsp;</span>
      </div>
      <div style="margin-bottom: 20px;">
        <el-table
          border
          :height="340"
          :data="tableData2"
          class="xpaas-table-class"
          row-class-name="xpaas-row-class"
          cell-class-name="xpaas-cell-class"
          header-row-class-name="xpaas-header-row-class"
          header-cell-class-name="xpaas-header-cell-class">
          <el-table-column prop="grade" show-overflow-tooltip label="年级" align="center" />
          <el-table-column prop="col" min-width="120" show-overflow-tooltip label="专业【培养层次】" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.pylevel }}【{{ scope.row.pylevel }}】</span>
            </template>
          </el-table-column>
          <el-table-column prop="ksrs" label="考试人数" show-overflow-tooltip align="center" />
          <el-table-column prop="xuefen" label="学分" show-overflow-tooltip align="center" />
          <el-table-column prop="anum" label="100-90" show-overflow-tooltip align="center" />
          <el-table-column prop="bnum" label="89-80" show-overflow-tooltip align="center" />
          <el-table-column prop="cnum" label="79-70" show-overflow-tooltip align="center" />
          <el-table-column prop="dnum" label="69-60" show-overflow-tooltip align="center" />
          <el-table-column prop="eenum" label="59-0" show-overflow-tooltip align="center" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { reqGetXqList, queryDictByCode, reqCheckLevelList, queryExamResultList, queryStatisticsList, queryCourseRate, queryResultDetail } from '@/api/admin1/check'
export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      titleShow: false,
      dialogShow1: false,
      dialogShow2: false,
      detail: {
        planId: '',
        semester: '',
        courseNo: '',
        courseName: ''
      },
      showType: 1,
      queryForm: {
        semester: '',
        statistics: '',
        assessment: '',
        level: '',
        study: ''
      },
      queryParams: {
        xueqi: '',
        pylevel: '',
        xxtype: ''
      },
      semesterList: [],
      statisticsList: [],
      assessmentList: [],
      levelList: [],
      studyList: [],
      scoreList: [],
      tableData: [],
      tableData1: [],
      tableData2: [],
      jsonFields: {
        教研室: 'teacherroom',
        课程编号: 'coursenumber',
        课程名称: 'coursename',
        授课教员: 'courseteacher',
        年级: 'grade',
        人数: 'peoplenum',
        优秀人数: 'anum',
        优秀占比: 'anumzb',
        良好人数: 'bnum',
        良好占比: 'bnumzb',
        中等人数: 'cnum',
        中等占比: 'zdnumzb',
        及格人数: 'dnum',
        及格占比: 'dnumzb',
        不及格人数: 'enumm',
        不及格占比: 'enumzb',
        最高分: 'maxscore',
        最低分: 'minscore',
        平均分: 'avgscore',
        分制: 'fz',
        考核方式: 'khfs'
      }
    }
  },
  mounted() {
    reqGetXqList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.semesterList = res.data.data
        this.queryForm.semester = res.data.data[0].xqmc
      }
    })
    queryDictByCode('statisticsType').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.statisticsList = res.data.data
        this.queryForm.statistics = res.data.data[0].dictValue
      }
    })
    queryDictByCode('assessment').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.assessmentList = res.data.data
        this.queryForm.assessment = res.data.data[0].dictValue
      }
    })
    reqCheckLevelList().then(res => {
      if(res.data.data && res.data.data.length > 0){
        this.levelList = res.data.data[0].children
      }
    })
    queryDictByCode('xxType').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.studyList = res.data.data
      }
    })
    queryDictByCode('assessment').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.scoreList = res.data.data
        this.scoreList.sort(function (item1, item2) {
          return parseInt(item2.dictKey) - parseInt(item1.dictKey)
        })
        this.handleChange(this.statisticsList[0].dictValue)
        this.handleSearch()
      }
    })
  },
  methods: {
    handleChange: function (val) {
      this.tableData = []
      this.total = 0
      if (val === '按课程') {
        this.titleShow = false
        delete this.jsonFields.教学班
        delete this.jsonFields.专业班次
      } else {
        this.titleShow = true
        this.jsonFields.教学班 = 'jxclass'
        this.jsonFields.专业班次 = 'zybc'
      }
    },
    handleSearch: function () {
      this.queryParams.xueqi = this.queryForm.semester
      this.queryParams.pylevel = this.queryForm.level.length > 0 ? this.queryForm.level.join(',') : ''
      this.queryParams.xxtype = this.queryForm.study
      const parms = {
        khx: this.queryForm.assessment,
        pylevel: this.queryForm.level.length > 0 ? this.queryForm.level.join(',') : '',
        tjfs: this.queryForm.statistics,
        xueqi: this.queryForm.semester,
        xxtype: this.queryForm.study,
        current: this.pageNo,
        size: this.pageSize
      }
      queryExamResultList(parms).then(res => {
        if (res.data.data && res.data.data.total > 0) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.tableData = []
          this.total = 0
        }
      })
    },
    handleReport: function () {
      if (this.tableData.length === 0) {
        this.$message({
          message: '请查询到数据后再进行统计！',
          type: 'warning'
        })
        return
      }
      this.tableData1 = []
      queryStatisticsList(this.queryParams).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.tableData1 = res.data.data
          this.tableData1.forEach(item => {
            item.junzhi = item.junzhi.toFixed(2)
            item.diyisifenwei = item.diyisifenwei.toFixed(2)
            item.disansifenwei = item.disansifenwei.toFixed(2)
            item.fangcha = item.fangcha.toFixed(2)
            item.biaozhuncha = item.biaozhuncha.toFixed(2)
          })
        }
      })
      this.dialogShow1 = true
    },
    handleDetail: function (row) {
      queryCourseRate(row.planid).then(res => {
        if (res.data.data) {
          this.scoreList.forEach(item => {
            if (item.dictKey === '5') {
              item.isSealed = res.data.data.usualscorerate && res.data.data.usualscorerate > 0
            } else if (item.dictKey === '4') {
              item.isSealed = res.data.data.examscorerate && res.data.data.examscorerate > 0
            } else if (item.dictKey === '3') {
              item.isSealed = res.data.data.experimentscorerate && res.data.data.experimentscorerate > 0
            } else if (item.dictKey === '2') {
              item.isSealed = res.data.data.midtermscorerate && res.data.data.midtermscorerate > 0
            } else {
              item.isSealed = true
            }
          })
          this.detail.planId = row.planid
          this.detail.semester = res.data.data.termid
          this.detail.courseNo = row.coursenumber
          this.detail.courseName = row.coursename
          const firstType = this.scoreList.find((item) => { return item.isSealed })
          this.showType = firstType.dictKey
          this.handleChangeType(row.planid, firstType.dictKey, firstType.dictValue)
        }
      })
      this.dialogShow2 = true
    },
    handleChangeType: function (planId, scoreTypeId, scoreType) {
      const params = {
        planid: planId,
        score: scoreType
      }
      queryResultDetail(params).then(res => {
        this.tableData2 = []
        if (res.data.data) {
          this.tableData2 = res.data.data
        }
      })
      this.showType = scoreTypeId
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      this.handleSearch()
    }
  }
}
</script>

<style lang="less" scoped>
  .button-style {
    float: left;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 110px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }

          }
        }
      }
    }
  }
  .normalTab {
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-left: 25px;
    margin-top: 7px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #E6EEF6;
    color: #0C4F9C;
    font-weight: 600;
    cursor: pointer;
  }
  .selectedTab {
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-left: 25px;
    margin-top: 7px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #5080C0;
    color: #FDFEFB;
    font-weight: 600;
    cursor: pointer;
  }
  .tabStyle {
    display: flex;
    border-bottom: 3px solid #427EBC;
    height: 50px;
    div:first-child {
      margin-left: 0;
    }
  }
  .mainTitle {
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: #0C4F9C;
    font-weight: 600;
    font-size: 18px;
  }
  .subTitle {
    height: 40px;
    line-height: 40px;
    color: #0C4F9C;
  }
  /deep/ .detailTable tr td:first-child{
    font-family: @fontFamily;
    font-size: 16px;
    font-weight: bold !important;
    color: #004ca7;
    background-color: #edf2f9;
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
</style>
